<template>
	<!-- 钱包卡片 -->
	<view class="sh-wallet-box x-f mb10">
		<view class="x-f wallet-left">
			<view class="wallet-item y-f" @tap="jump('/pages/user/wallet/indexxx')">
				<text class="wallet-item__detail item-balance">{{ userInfo.money || '0' }}</text>
				<text class="wallet-item__title">
					<text class="cuIcon-favorfill text-red"></text>
					<text class="cuIcon-favorfill text-red"></text>
					余额
				</text>
			</view>
			<view class="wallet-item y-f" @tap="jump('/pages/user/wallet/iii')">
				<text class="wallet-item__detail item-balance">{{ dividends || '0' }}</text>
				<text class="wallet-item__title">
					<text class="cuIcon-favorfill text-red"></text>
					<text class="cuIcon-favorfill text-red"></text>
					分红
				</text>
			</view>
			<view class="wallet-item y-f" @tap="jump('/pages/app/coupon/payyy')" v-if="0">
				<text class="wallet-item__detail item-score">{{ userInfo.score || '0' }}</text>
				<text class="wallet-item__title">充值星星</text>
			</view>
			<!-- <view class="wallet-item y-f" @tap="jump('/pages/app/coupon/list')">
				<text class="wallet-item__detail item-coupon">{{ userInfo.coupons_num || '0' }}</text>
				<text class="wallet-item__title">优惠券</text>
			</view> -->
			<view class="wallet-item y-f">
				<text class="wallet-item__detail item-coupon">{{ userInfo.salesBoxNum || '0' }}</text>
				<text class="wallet-item__title">个人销售盒数</text>
			</view>
		</view>
		<view class="wallet-item y-f wallet-right" @tap="jump('/pages/user/wallet/index')">
			<image class="cut-off--line" :src="$IMG_URL + '/imgs/user/cut_off_line.png'" mode=""></image>
			<image class="wallet-img" :src="$IMG_URL + '/imgs/user/wallet.png'" mode="aspectFill"></image>
			<text class="wallet-item__title">我的钱包</text>
		</view>

		<!-- <shopro-modal v-model="showModal1" style="z-index: 88;">
			<block slot="modalContent">
				<view class="modal-box">
					<view class="modal-head">
						<image class="modal-head-img" :src="$IMG_URL + '/imgs/modal_bg.png'" mode=""></image>
						<text class="modal-head-title">转账金额</text>
					</view>
					<input class="inp" type="number" v-model="money1" placeholder="在此输入转账金额" placeholder-class="pl-inp" />
					
					<button class="cu-btn post-btn" @tap="postMoney1">转账</button>
				</view>
			</block>
		</shopro-modal> -->
	</view>
</template>

<script>
/**
 * 钱包样式卡片
 */
import { mapMutations, mapActions, mapState } from 'vuex';
export default {
	components: {},
	data() {
		return {
			showModal1: false,
			platform: uni.getStorageSync('platform') //当前平台。
		};
	},
	props: {
		dividends: {
			type: [String, Number],
			default: 0
		}
	},

	computed: {
		...mapState({
			userInfo: state => state.user.userInfo
		})
	},

	methods: {
		jump(path, query) {
			console.log('111 :>> ', 111);
			this.$Router.push({
				path: path,
				query: query
			});
		}
	}
};
</script>

<style lang="scss">
.modal-box {
	background: #fff;
	width: 610rpx;
	margin: 0 auto;
	border-radius: 20rpx;
	.modal-head-img {
		width: 100%;
		height: 213rpx;
	}

	.modal-head-title {
		font-size: 35rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #6d5028;
		line-height: 42rpx;
	}

	.inp {
		width: 501rpx;
		height: 78rpx;
		border: 1rpx solid rgba(168, 112, 13, 1);
		margin: 60rpx auto 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #6d5028;

		.pl-inp {
			color: #bd9560;
		}
	}

	.radio {
		width: 500rpx;
		padding: 0 50rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(200, 150, 61, 1);
		margin-bottom: 20rpx;

		.radio-inp {
			transform: scale(0.7);
			margin-right: 10rpx;
		}
	}

	.post-btn {
		width: 492rpx;
		height: 70rpx;
		background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
		box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
		border-radius: 35rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		padding: 0;
		margin-bottom: 60rpx;
	}
}
// 钱包卡片
.sh-wallet-box {
	background: #fff;
	height: 180rpx;
	position: relative;
	.wallet-left {
		flex: 4;
	}
	.wallet-right {
		position: relative;
		.cut-off--line {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: (750rpx/5) - 15rpx;
			width: 30rpx;
			height: 136rpx;
		}
	}
	.wallet-item {
		flex: 1;
		.wallet-img {
			width: 46rpx;
			height: 46rpx;
		}
		.wallet-item__detail {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(168, 112, 13, 1);
		}
		.wallet-item__title {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
			margin-top: 20rpx;
		}
		.item-balance::after {
			content: '颗';
			font-size: 16rpx;
			margin-left: 4rpx;
		}
		.item-score::after {
			content: '个';
			font-size: 14rpx;
			margin-left: 4rpx;
		}
		.item-coupon::after {
			content: '盒';
			font-size: 16rpx;
			margin-left: 4rpx;
		}
	}
}
</style>
